<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/sys-admin' }">
        <i class="el-icon-s-gird"></i> 后台管理
      </el-breadcrumb-item>
      <el-breadcrumb-item>班级列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>

    <template>
      <el-table
          :data="tableData"
          border
          style="width: 100%">
        <el-table-column
            prop="id" label="ID"  width="40" align="center">
        </el-table-column>
        <el-table-column
            prop="className"  label="班级名称"  width="100">
        </el-table-column>
        <el-table-column
            prop="sort" label="排序序号" header-align="center">
        </el-table-column>

        <el-table-column
            prop="" label="操作" width="100" header-align="center">
          <template slot-scope="scope">
            <template>
              <el-button type="primary" icon="el-icon-edit" size="mini"
                         circle @click="handEdit(scope.row.id)"></el-button>
              <el-button type="danger" icon="el-icon-delete" size="mini"
                         circle @click="openDeleteConfirm(scope.row.id)"></el-button>
            </template>
          </template>
        </el-table-column>
      </el-table>
    </template>
    </div>
  </template>
<script>
export default {
  data() {
    return {
      tableData:  []
    }
  },
  methods:{
    handEdit(id){
      alert("你惦记了id="+id+"的编辑按钮")
    },
    openDeleteConfirm(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleDelete(id)
      })
    },
    handleDelete(id) {
      let url = 'http://localhost:9088/classe/' + id + '/delete';
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state != 20000) {
          this.$message.error(responseBody.message);
        }
        this.loadAdminList();
      });
    },
    loadAdminList(){
      console.log("准备从服务器获取职位列表...")
      let url ='http://localhost:9088/classe/'
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response)=> {
        console.log("准备从服务器获取数据")
        console.log(response)
        let responseBody=response.data;
        if(responseBody.state==20000){
          this.tableData=responseBody.data;
        }else{
          this.$message.error(responseBody.message)
        }
      })
    }
  },
  mounted() {
    console.log("执行生命周期的方法")
    this.loadAdminList();
  }
}
</script>aaa